<!--
兼容性问题
    - 所有HTML5和CSS3都有兼容问题，IE9及其以上版本才支持。
    - 参考：caniuse网站。

语义标签
    - 语义：从字面意思就知道是干啥用的。
    - 非语义标签：div、span...
    - 语义标签：table、h1、ul...

H5新增的语义标签
    header      头部
    nav         导航
    article     内容/文章
    section     某一块区域（类似div、span容器标签）
    aside       侧边栏
    footer      尾部

注意
    1）语义化标签主要针对【搜索引擎】的
    2）可以【多次】使用
    3）其它浏览器中都识别为块级元素，而在IE9中是行内元素，需要转为【块级元素】
    4）【移动端】基本没有兼容性问题，可以随便用
-->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .w {
    width: 800px;
    margin: 0 auto 10px auto;
    background-color: skyblue;
    text-align: center;
  }
  header {
    height: 200px;
  }
  nav {
    height: 65px;
  }
  section {
    height: 500px;
  }
  aside {
    float: left;
    width: 30%;
    height: 100%;
    background-color: cyan;
  }
  article {
    float: left;
    width: 70%;
    height: 100%;
    background-color: gray;
  }
  footer {
    height: 200px;
  }
</style>

<header class="w">header</header>
<nav class="w">nav</nav>
<section class="w">
  <aside>aside</aside>
  <article>article</article>
</section>
<footer class="w">footer</footer>
